/* * @Author: silas * @Date: 2021-08-01 17:11:40 * @Last Modified by: silas *
@Last Modified time: 2021-08-01 17:18:59 */
<template>
    <div class="core">
        <div class="header">
            <h3 class="title">欠费不确认详单</h3>
        </div>
        <div>
            <el-form :inline="true" :model="form">
                <el-form-item label="区域">
                    <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
                </el-form-item>
                <el-form-item label="月份">
                    <el-date-picker
                        size="mini"
                        v-model="form.month"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择年月"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button
                        size="mini"
                        id="search_btn"
                        type="primary"
                        @click="handleSearch()"
                        >查询</el-button
                    >
                    <el-button
                        size="mini"
                        id="export_btn"
                        @click="handleExport()"
                        >导出</el-button
                    >
                    <el-button v-if="isMore" size="mini" @click="handle_back()">
                        返回
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--  :span-method="arraySpanMethod" -->
        <div class="table" v-if="!isMore">
            <ux-grid
            size="mini"
            id="tablePx"
            ref="tablePx"
            :header-row-style="{ background: '#eef1f6' }"
            border
            :stripe="true"
            :widthResize="true"
            :height="height"
            style="width: 100%"
            v-loading="showTableLoading"
            show-overflow="tooltip"
            show-header-overflow="title"
        >
           
            <ux-table-column title="区域" min-width="160">
                <template slot-scope="scope">
                    <span class="blue" @click="handle_detail(scope.row, scope.row.c4Id)">{{scope.row.c4Name}}</span>
                </template>
            </ux-table-column>
            <ux-table-column field="c5Name" title="支局" min-width="160">
                <template slot-scope="scope">
                    <span class="blue" @click="handle_detail(scope.row, scope.row.c5Id)">{{scope.row.c5Name}}</span>
                </template>
            </ux-table-column>
            <ux-table-column field="owe" title="总欠费不确认" min-width="160">
                <template slot-scope="scope">
                    <span class="blue" @click="handle_top(scope.row)">{{scope.row.owe}}</span>
                </template>
            </ux-table-column>
            <ux-table-column field="cur" title="当月新增欠费不确认" min-width="160"></ux-table-column>
            <ux-table-column field="hb" title="环比上月增加值" min-width="160"></ux-table-column>
            <ux-table-column field="zb" title="欠费不确认总占比" min-width="160"></ux-table-column>
            <ux-table-column title="客户经理" min-width="160">
                <template slot-scope="scope">
                    <span class="blue" @click="handle_detail(scope.row, scope.row.c5Id)">{{scope.row.managerName}}</span>
                </template>
            </ux-table-column>
            <ux-table-column field="custName" title="客户名称" min-width="160" sortable></ux-table-column>
            <!-- <ux-table-column
                :title="item.label"
                min-width="150"
                v-for="(item, i) in columns"
                :key="'item' + i"
                align="center"
                :field="item.value"
                
            /> -->
        </ux-grid>
        </div>
            <div v-if="isMore">
                <div class="table">
                    <ux-grid
                        size="mini"
                        id="tablePx1"
                        ref="tablePx1"
                        :header-row-style="{ background: '#eef1f6' }"
                        border
                        :stripe="true"
                        :widthResize="true"
                        style="width: 100%"
                        v-loading="showTableLoading"
                        show-overflow="tooltip"
                        show-header-overflow="title"
                    >
                        <ux-table-column
                            :title="item.label"
                            min-width="150"
                            v-for="(item, i) in columns"
                            :key="'item' + i"
                            align="center"
                            :field="item.value"
                            
                        />
                    </ux-grid>
                </div>
                <div class="page">
                    <el-pagination
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        :current-page="form.pageNum"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="form.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="form.total"
                    ></el-pagination>
                </div>
            </div>
            
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import qs from "qs";
import prefixAPI from "@/api/prefixAPI"; 
import { getCookie, setCookie } from "@/common/js/cookie";
const url = prefixAPI.pack;
import {
    setSessionStorage,
    getSessionStorage,
    removeSessionStorage
} from "@/common/js/storage";
export default {
    data() {
        return {
            accountInfo: JSON.parse(getSessionStorage("accountInfo")),
            form: {
                areaId: "",
                month: this.moment().subtract(1, "months").format("YYYYMM"),
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            tableData: [],
            tableDetail: [],
            tableLoading: false,
            showTableLoading: false,
            columns: [],
            height: window.innerHeight - 60 - 30 - 175,
            isMore: false,
        };
    },
    mounted() {
        var that = this;

        that.form.areaId = that.accountInfo.areaId;
        that.getData();
    },
    methods: {
        getData() {
            var that = this;

            that.tableLoading = true;
            $budgetAPI.listOweConfirmBill(
                {
                    month: that.form.month,
                    areaId: that.form.areaId,
                    pageNum: that.form.pageNum,
                    pageSize: that.form.pageSize,
                },
                res => {
                    that.tableLoading = false;
                    if (res && res.code == 0) {

                        that.tableData = res.content.data;
                       
                        this.$refs.tablePx.reloadData(this.tableData);
                       
                        console.log(res);
                    }
                }
            );
        },
        handleSearch() {
            var that = this;

            that.getData();
        },
        handleExport() {
            var params = {
                ...this.form,
                token: getCookie("token"),
            };
            window.open(
                `${url}/oweAccount/ExportOweConfirmBill?${qs.stringify(params)}`,
                "_self"
            );
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
                return this.spanArr[rowIndex][columnIndex];
            }
        },
        handleSizeChange1(val) {
            this.form.pageSize = val;
            this.getData();
        },
        handleCurrentChange1(val) {
            this.form.pageNum = val;
            this.getData();
        },
        handle_detail(row, areaId) {
            var that = this;

            if(row.custName) {
                return
            }
            $budgetAPI.getOwnInfo({
                month: that.form.month,
                areaId: areaId,
                managerName: row.managerName
            }, res => {
                that.tableData = res.content.data;
                this.$refs.tablePx.reloadData(this.tableData);
            })
            
        },
        handle_top(row) {
            var that = this;

            that.isMore = true;

            $budgetAPI.getOwnInfoTop({
                month: that.form.month,
                areaId: row.c4Id,
                managerName: row.managerName,
                ccustName: row.custName,
                pageNum: that.form.pageNum,
                pageSize: that.form.pageSize
            }, res => {
               
                that.tableDetail = res.content.data;
                that.columns =  Array.from(new Array(res.content.keys.length), (it) => it = {label: '', value: ''});

                res.content.keys.map((it, i)=> {
                    that.columns[i]['value'] = it
                })
                    res.content.names.map((it, i)=> {
                    that.columns[i]['label'] = it
                })
                this.$refs.tablePx1.reloadData(this.tableDetail);
                that.form.total = res.content.total
            })
        },
        handle_back() {
            this.isMore = false;
            this.getData();
        }
    }
};
</script>

<style lang="scss" scoped>
.core {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        .title {
            font-weight: bold;
            font-size: 15px;
        }
    }
}
#search_btn {
    background-color: #2a90de;
}
#export_btn {
    background-color: #2cd531;
    color: #fff;
}
.blue {
    color: #2a90de;
    cursor: pointer;
}
</style>
